---
# title: "Border Radius"
title: "边框圆角"
# description: "Utilities for controlling the border radius of an element."
description: "用于控制元素边框半径的功能类。"
features:
  responsive: true
  customizable: true
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/borderRadius'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

<!-- ## Rounded corners

Use utilities like `.rounded-sm`, `.rounded`, or `.rounded-lg` to apply different border radius sizes to an element. -->
## 圆角

使用 `.rounded-sm`, `.rounded`, 或 `.rounded-lg` 等实用功能类来应用不同的边框半径大小到一个元素上。

```html lightBlue
<template preview>
  <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
    <div class="p-6 bg-light-blue-500 text-white text-center font-extrabold flex items-center justify-center rounded-sm">.rounded-sm</div>
    <div class="p-6 bg-light-blue-500 text-white text-center font-extrabold flex items-center justify-center rounded">.rounded</div>
    <div class="p-6 bg-light-blue-500 text-white text-center font-extrabold flex items-center justify-center rounded-md">.rounded-md</div>
    <div class="p-6 bg-light-blue-500 text-white text-center font-extrabold flex items-center justify-center rounded-lg">.rounded-lg</div>
  </div>
</template>

<div class="**rounded-sm** ..."></div>
<div class="**rounded** ..."></div>
<div class="**rounded-md** ..."></div>
<div class="**rounded-lg** ..."></div>
```

<!-- ## Pills and circles

Use the `rounded-full` utility to create pills and circles. -->
## 药丸形💊和圆圈

使用 `rounded-full` 功能类来创建药丸形💊和圆圈。

```html indigo
<template preview>
  <div class="flex justify-center items-center space-x-6">
    <div class="bg-indigo-500 px-6 py-3 text-white text-center font-extrabold rounded-full">Pill Shape</div>
    <div class="bg-indigo-500 h-24 w-24 text-white text-center font-extrabold flex items-center justify-center rounded-full">Circle</div>
  </div>
</template>

<div class="**rounded-full** py-3 px-6...">Pill Shape</div>
<div class="**rounded-full** h-24 w-24 flex items-center justify-center...">Circle</div>
```

<!-- ## No rounding -->
## 无圆角

<!-- Use `rounded-none` to remove an existing border radius from an element. -->
使用 `rounded-none` 从元素中删除现有的边框半径。

<!-- This is most commonly used to remove a border radius that was applied at a smaller breakpoint. -->
这最常见的是用来删除一个应用在较小断点上的边框半径。

```html rose
<template preview>
  <div class="flex justify-center items-center">
    <div class="bg-rose-500 p-6 text-white text-center font-extrabold rounded-none">.rounded-none</div>
  </div>
</template>

<div class="**rounded-none** ...">.rounded-none</div>
```

<!-- ## Rounding sides separately -->
## 独立设置每条边框的圆角效果

<!-- Use `rounded-{t|r|b|l}{-size?}` to only round one side an element. -->
使用 `rounded-{t|r|b|l}{size?}` 只将圆角应用到元素的一个边框上。

```html emerald
<template preview>
  <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
    <div class="bg-emerald-500 p-6 text-white text-center font-extrabold rounded-t-lg">.rounded-t-lg</div>
    <div class="bg-emerald-500 p-6 text-white text-center font-extrabold rounded-r-lg">.rounded-r-lg</div>
    <div class="bg-emerald-500 p-6 text-white text-center font-extrabold rounded-b-lg">.rounded-b-lg</div>
    <div class="bg-emerald-500 p-6 text-white text-center font-extrabold rounded-l-lg">.rounded-l-lg</div>
  </div>
</template>

<div class="**rounded-t-lg** ...">.rounded-t-lg</div>
<div class="**rounded-r-lg** ...">.rounded-r-lg</div>
<div class="**rounded-b-lg** ...">.rounded-b-lg</div>
<div class="**rounded-l-lg** ...">.rounded-l-lg</div>
```

<!-- ## Rounding corners separately -->
## 独立设置每个边角的圆角效果

<!-- Use `rounded-{tl|tr|br|bl}{-size?}` to only round one corner an element. -->
使用 `rounded-{tl|tr|br|bl}{-size?}` 只将圆角应用到元素的一个边角上。

```html amber
<template preview>
  <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
    <div class="bg-amber-500 p-6 text-white text-center font-extrabold rounded-tl-lg">.rounded-tl-lg</div>
    <div class="bg-amber-500 p-6 text-white text-center font-extrabold rounded-tr-lg">.rounded-tr-lg</div>
    <div class="bg-amber-500 p-6 text-white text-center font-extrabold rounded-br-lg">.rounded-br-lg</div>
    <div class="bg-amber-500 p-6 text-white text-center font-extrabold rounded-bl-lg">.rounded-bl-lg</div>
  </div>
</template>

<div class="**rounded-tl-lg** ..."></div>
<div class="**rounded-tr-lg** ..."></div>
<div class="**rounded-br-lg** ..."></div>
<div class="**rounded-bl-lg** ..."></div>
```

<!-- ## Responsive -->
## 响应式

<!-- To control the border radius of an element at a specific breakpoint, add a `{screen}:` prefix to any existing border radius utility. For example, use `md:rounded-lg` to apply the `rounded-lg` utility at only medium screen sizes and above. -->

要在特定的断点处控制元素的边界半径，请在任何现有的边界半径功能类中添加 `{screen}:` 前缀。例如，使用 `md:rounded-lg` 来应用 `rounded-lg` 功能类，只适用于中等尺寸以上的屏幕。

```html
<div class="rounded **md:rounded-lg** ...">
  <!-- ... -->
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->

关于 Tailwind 的响应式设计功能的更多信息，请查看[响应式设计](/docs/responsive-design)文档。

<!-- ## Customizing -->
## 自定义

<!-- ### Border Radiuses

By default Tailwind provides five border radius size utilities. You can change, add, or remove these by editing the `theme.borderRadius` section of your Tailwind config. -->
### 边框半径

默认情况下，Tailwind 提供了五个边框半径大小的功能类，您可以通过编辑 `theme.borderRadius` 部分来改变，添加或删除这些功能类。您可以通过编辑 Tailwind 配置中的 `theme.borderRadius` 部分来改变，添加或删除这些功能类。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      borderRadius: {
        'none': '0',
-       'sm': '0.125rem',
-       DEFAULT: '0.25rem',
+       DEFAULT: '4px',
-       'md': '0.375rem',
-       'lg': '0.5rem',
-       'full': '9999px',
+       'large': '12px',
      }
    }
  }
```

### Variants
### 变体

<Variants plugin="borderRadius" />

<!-- ### Disabling -->
### 禁用

<Disabling plugin="borderRadius" />
